<template>
  <div>
    <el-dialog
      v-model.sync="dialogVisible"
      title="屏蔽谁"
      width="50%"
      :before-close="
        (done) => {
          ElMessageBox.confirm('是否关闭?')
            .then(() => {
              done()
              multipleSelection = []
              $emit('handleClose')
            })
            .catch(() => {
              // catch error
            })
        }
      "
      @open="initData"
    >
      <el-row>
        <el-col class="mb-2">
          <el-select v-model="queryField" class="ya-date-field" placeholder="查询类型">
            <el-option value="member_id" label="会员ID" />
            <el-option value="nickname" label="昵称" />
          </el-select>
          <el-input
            v-model="search_value"
            class="ya-search-value mr-2"
            placeholder="请输入关键字"
            clearable
          />
          <el-button type="primary" @click="getUsers()">查询</el-button>
          <el-button
            title="重置"
            @click="
              () => {
                queryField = 'nickname'
                search_value = ''
                query = {
                  nickname: '',
                  member_id: '',
                  wechat_id: param.wechat_id,
                  status: 1,
                  page: 1,
                  limit: 10
                }
                getUsers()
              }
            "
          >
            <!-- <svg-icon icon-class="refresh" /> -->
            重置
          </el-button>
        </el-col>
      </el-row>
      <el-table
        ref="multipleTableRef"
        :data="data"
        :row-key="
          (row) => {
            return row.member_id
          }
        "
        style="width: 100%"
        @selection-change="
          (val) => {
            multipleSelection = val
          }
        "
      >
        <el-table-column type="selection" width="55" :reserve-selection="true" />
        <el-table-column prop="member_id" label="会员ID" width="180" />
        <!-- <el-table-column prop="headimgurl" label="头像" width="180">
          <el-avatar :src="headimgurl" />
        </el-table-column> -->
        <el-table-column prop="nickname" label="昵称" width="220">
          <template #default="scope">
            <el-avatar style="vertical-align: middle;" size="20" :src="scope.row.headimgurl" />
              {{ scope.row.nickname }}
          </template>
        </el-table-column>
        <el-table-column prop="status" label="状态">
          <template #default="scope">
            <el-tag v-if="scope.row.status == 1" type="success">关注</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="create_time" label="注册时间" />
      </el-table>
      <!-- 分页 -->
      <pagination
        v-show="count > 0"
        v-model:total="count"
        v-model:page="query.page"
        v-model:limit="query.limit"
        @pagination="getUsers"
      />
      <template #footer>
        <span class="dialog-footer">
          <el-button
            @click="
              () => {
                multipleSelection = []
                $emit('handleClose')
              }
            "
            >取消</el-button
          >
          <el-button
            type="primary"
            @click="
              () => {
                $emit('handleClose')
                $emit('handleComplete', multipleSelection)
                multipleSelection = []
                $refs.multipleTableRef.clearSelection()
              }
            "
            >确定</el-button
          >
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { list } from '@/api/member/fans'

export default {
  name: 'Invisible',
  components: {},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    toggleSelectionList: {
      type: Array,
      default: () => []
    },
    param: {
      type: Object,
      default: () => {}
    }
  },
  data() {
    return {
      dialogVisible: false,
      data: [],
      queryField: 'nickname',
      search_value: '',
      query: {
        nickname: '',
        member_id: '',
        wechat_id: '',
        status: 1,
        page: 1,
        limit: 10,
        not_in: []
      },
      multipleSelection: [],
      count: 0
    }
  },
  watch: {
    visible(val) {
      this.dialogVisible = val
    }
  },
  methods: {
    // Dialog打开回调
    initData() {
      this.search_value = ''
      this.queryField = 'nickname'
      this.query = {
        nickname: '',
        member_id: '',
        wechat_id: '',
        status: 1,
        page: 1,
        limit: 10,
        not_in: []
      }
      this.query.wechat_id = this.param.wechat_id
      this.multipleSelection = this.toggleSelectionList
      this.getUsers()
    },
    getUsers() {
      this.data = []
      // 拼查询条件
      if (this.search_value) {
        this.query[this.queryField] = this.search_value
      } else {
        this.query[this.queryField] = ''
      }
      list(this.query)
        .then((res) => {
          if (res.code === 200) {
            this.data = res.data.list
            this.count = res.data.count
            // 勾选已选择的用户,只对当前列生效
            this.$nextTick(() => {
              this.toggleSelection()
            })
          }
        })
        .catch(() => {})
    },
    toggleSelection() {
      let arr = []
      this.multipleSelection.forEach((row) => {
        arr.push(row.member_id)
      })
      this.data.forEach((row) => {
        if (arr.includes(row.member_id)) this.$refs.multipleTableRef.toggleRowSelection(row, true)
      })
    },
    // 数组去重
    removal(arr, key) {
      for (var i = 0; i < arr.length - 1; i++) {
        for (var j = i + 1; j < arr.length; j++) {
          if (arr[i][key] == arr[j][key]) {
            arr.splice(j, 1)
            //因为数组长度减小1，所以直接 j++ 会漏掉一个元素，所以要 j--
            j--
          }
        }
      }
      return arr
    }
  }
}
</script>

<style lang="scss" scoped></style>
